<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>
<!-- 引入jquery -->
<script type="text/javascript" th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">

	var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	myChart.showLoading();
	$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
	    myChart.hideLoading();

	    graph.nodes.forEach(function (node) {
	        node.label = {
	            show: node.symbolSize > 30
	        };
	    });
	    option = {
	        title: {
	            text: 'Les Miserables',
	            subtext: 'Default layout',
	            top: 'bottom',
	            left: 'right'
	        },
	        tooltip: {},
	        legend: [{
	            // selectedMode: 'single',
	            data: graph.categories.map(function (a) {
	                return a.name;
	            })
	        }],
	        animationDuration: 1500,
	        animationEasingUpdate: 'quinticInOut',
	        series: [
	            {
	                name: 'Les Miserables',
	                type: 'graph',
	                layout: 'none',
	                data: graph.nodes,
	                links: graph.links,
	                categories: graph.categories,
	                roam: true,
	                label: {
	                    position: 'right',
	                    formatter: '{b}'
	                },
	                lineStyle: {
	                    color: 'source',
	                    curveness: 0.3
	                },
	                emphasis: {
	                    focus: 'adjacency',
	                    lineStyle: {
	                        width: 10
	                    }
	                }
	            }
	        ]
	    };

	    myChart.setOption(option);
	});

	option && myChart.setOption(option);

	</script>
</body>
</html>